<template>
	<view>
		<view class="VideoXuanji-box">
			<view class="VideoXuanji">
				
				<view class="Top">
					<view class="left">
						<view class="Title">
							<text class="Title-text">{{title}}</text>
						</view>
					</view>
					<view class="right">
						<view class="item" @click="open">
							<view class="jianjie">
								<text class="jianjie-text">{{videoitem[0].vod_remarks}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="Bottom h5 zy dy">
					<!-- 选集列表 -->
					<view class="xuanji scoll-x"
					:class="videoitem[0].type_leixing=='综艺' ? 'zy-xuanji':'dy-xuanji'"
					>
						<scroll-view class="scroll-view" :scroll-x="true" 
						:scroll-with-animation="true"
						:show-scrollbar="false"
						:scroll-left="0"
						:scroll-into-view="scrollviewitem"
						@scroll="scroll"
						>
							<view class="scollView">
								<!-- 如果item大于或等4，则开始批量设置距离 -->
								<view class="xuanji-item"
								:class="curlvideoIndex==index ?'current':'no'"
								v-for="(item,index) in videojishuURL"
								:key="index"
								:data-index="index"
								:data-url="item.url"
								:data-titles="item.spliturl_title"
								:data-title="item.spliturl_title"
								:data-pic="videoitem[0].vod_pic"
								:data-scrollleft="Number(index*48.166)+Number(345/5)"
								:id="'item'+index"
								@click="xuanjiTap"
								>	
									<!-- #ifdef H5 || MP || APP-VUE -->
									<text class="jishu-text" :class="videoitem[0].type_leixing=='综艺' ? 'zy-btn':'dy-btn'"
									>{{videoitem[0].type_leixing=='综艺' ? item.spliturl_title:index+Number(1)}}</text>
									<!-- #endif -->
									<!-- #ifdef APP-NVUE -->
									<!-- NVUE下死活显示不出来综艺标题，而非NVUE却正常，是NVUE自己的BUG -->
									<text class="jishu-text" :class="videoitem[0].vod_class=='综艺' ? 'zy-btn':'dy-btn'"
									>{{videoitem[0].vod_class=='综艺' ? item.zytitle:index+Number(1)}}</text>
									<!-- #endif -->
									
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<!-- popup弹窗 -->
		<button v-if="false" @click="open">打开弹窗</button>
		<uni-popup ref="popup" type="bottom">
		    <view class="popup-box">
		    	<view class="popup">
		    		<!-- 选集列表 -->
		    		<view class="popup-xuanji"
					>
						<scroll-view class="popup-scroll-view" :scroll-y="true" :show-scrollbar="false">
							<view class="popup-scollView">
								<!-- 如果item大于或等4，则开始批量设置距离 -->
								<view style="width: 200rpx;" v-if="videoitem[0].type_leixing=='综艺'" class="popup-xuanji-item" :class="curlvideoIndex==index ?'popup-current':'no'"
									v-for="(item,index) in videojishuURL"
									:key="index"
									:data-index="index"
									:data-url="item.url"
									:data-pic="videoitem[0].vod_pic"
									:data-scrollleft="Number(index*48.166)+Number(345/5)"
									:id="'item'+index"
									@click="xuanjiTap">
									
										<text class="jishu-text">{{item.spliturl_title}}</text>
										
								</view>
								<view v-else class="popup-xuanji-item" :class="curlvideoIndex==index ?'popup-current':'no'":key="index"
									:data-index="index"
									:data-url="item.url"
									:data-pic="videoitem[0].vod_pic"
									:data-scrollleft="Number(index*48.166)+Number(345/5)"
									:id="'item'+index"
									@click="xuanjiTap">
									
									<text class="jishu-text">{{index+Number(1)}}</text>
									
								</view>
								<!-- #ifdef APP-VUE -->
								<view class="popup-xuanji-item qq" :class="curlvideoIndex==index ?'popup-current':'no'":key="index" v-for="(item,index) in videojishuURL"
									:data-index="index"
									:data-url="item.url"
									:data-pic="videoitem[0].vod_pic"
									:data-scrollleft="Number(index*48.166)+Number(345/5)"
									:id="'item'+index"
									@click="xuanjiTap">
									<text class="jishu-text">{{index+Number(1)}}</text>
								</view>
								<!-- #endif -->
								
							</view>
						</scroll-view>
		    		</view>
					<view class="tit-box">
						<text class="tit-text">如果视频过多，上下滚动选择视频</text>
					</view>
		    	</view>
		    </view>
		    <button v-if="false" @click="close">关闭</button>
		</uni-popup>
	</view>
</template>

<script>
	//导入公用的非传参等事件，如打开弹窗、关闭弹窗等....
	import componentsFunction from '../mixins/components.js'
	export default {
		name:"VideoXuanji",
		mixins:[componentsFunction],
		props:{
			//导航名称 Header-left[title]
			title:{
				type:String,
				default:'选集'
			},
			//当前集数坐标
			curlvideoIndex:{
				type:Number,
				default:0
			},
			//每一集的播放链接
			videojishuURL:{
				type:Array,
				default:[]
			},
			//视频信息
			videoitem:{
				type:Array,
				default:[]
			},
			//值应为某子元素id（id不能以数字开头）。
			//设置哪个方向可滚动，则在哪个方向滚动到该元素
			//@scroll-view属性：scroll-into-view
			scrollviewitem:{
				type:String,
				default:'item0'//默认0
			},
			//设置scroll需要滚动的距离
			//暂时不用这个，距离总有误差！
			scrollleft:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				//测试
				CurIndex:0,
				
				//
				toView:this.scrollviewitem
			};
		},
		methods:{
			// 选集事件
			xuanjiTap(e){
				
				let index = e.currentTarget.dataset.index
				
				let url = e.currentTarget.dataset.url//视频地址
				let pic = e.currentTarget.dataset.pic//视频封面
				
				//定义scoll-view参数
				let options = {
					index,
					ScViewitem:'item'+index,
					//scrollleft:scrollleft
					url,
					pic
				}
				this.$emit('change',options)
			},
			scroll: function(e) {
				//console.log(e)
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	@import './VideoXuanji.scss';
</style>
